<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="search">
		<!-- 搜索框 -->
		<view class="px-[24rpx] py-[14rpx] bg-white">
			<u-search v-model="keyword" placeholder="请输入关键词搜索" height="72" @search="handleSearch" @custom="handleSearch" @clear="search.searching = false"></u-search>
		</view>

		<!-- 搜索 -->
		<view class="search-content" v-show="search.searching">
			<z-paging ref="paging" v-model="activityData" @query="queryList" :fixed="false" height="100%" use-page-scroll>
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in activityData" :key="item.id" btn-width="120">
					<navigator :url="`/packages/pages/msg_course/msg_course?id=${item.course.id}`">
						<view class="ins-card flex bg-white mx-[20rpx] my-[10rpx] px-[20rpx] py-[20rpx]">
							<view class="mr-[20rpx]">
								<u-image :src="item.course.image" width="180" height="180"></u-image>
							</view>
							<view class="news-card-content flex flex-col justify-between flex-1">
								<view class="news-card-content-title text-base text-lg">{{ item.course.name }}</view>
								<view class="text-sm my-[16rpx] flex u-col-center justify-between">
									<u-line-progress
										:show-percent="false"
										height="16"
										class="u-progress"
										active-color="#3968FF"
										:percent="item.progress"
									></u-line-progress>
									<view class="text-sm text-muted ml-2">{{item.progress}}%</view>
								</view>
							
								<view class="text-xs w-full flex justify-between mt-[12rpx]">
									<view>时长：{{ item.course.alltime }}</view>
									<view class="text-error" v-if="item.course.vip == 1">会员</view>
									<view style="color: #3968ff" v-else>免费</view>
								</view>
							</view>
						</view>
					</navigator>
				</u-swipe-action>
			</z-paging>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, shallowRef } from 'vue';
import { courseList } from '@/api/shop';

const activityData: any = ref([]);

interface Search {
	his_search: string[];
	searching: boolean;
}

const search = reactive<Search>({
	his_search: [],
	searching: false
});
const keyword = ref<string>('');
const paging = shallowRef();

const handleSearch = (value: string) => {
	keyword.value = value;
	paging.value.reload();
	search.searching = true;
};

const queryList = async (page_no: number, page_size: number) => {
	try {
		const { lists } = await courseList({
			keys: keyword.value,
			page_no,
			page_size
		});
		activityData.value.concat(lists);
		paging.value.complete(lists);
	} catch (e) {
		console.log('报错=>', e);
		//TODO handle the exception
		paging.value.complete(false);
	}
};
</script>

<style lang="scss" scoped>
.search {
	&-content {
		height: calc(100vh - 46px - env(safe-area-inset-bottom));
	}
	&-border {
		border: 1px solid #eee;
		border-radius: 15rpx;
	}
}
</style>
